<template>
  <div id="app">
    <van-tabs
      v-if="userFlag"
      v-model="active"
      color="#3Ab5ff"
      title-active-color="#3Ab5ff"
      @change="changeTab"
    >
      <van-tab :title="`我的合同${pageData1.pending>0?'('+pageData1.pending+')':''}`"></van-tab>
      <van-tab  :title="`公司签章${pageData2.pending>0?'('+pageData2.pending+')':''}`"></van-tab>
    </van-tabs>
    <div class="slideWarp" :style="{top:userFlag==true?'':0}">
     <ScrollTab ref="scroll"  @load="loadMore" v-model="active" :pageNum="pageNum">
          <template #tab1>
            
                 <Facard
                    class="listCard"
                    :href="`detail.html?taskId=${item.TASK_ID}&type=P`"
                    v-for="item in pageData1.data"
                    :key="item.TASK_ID"
                    >
                    <template #title>
                        <div class="name"></div>
                        <div class="status">
                          <span>{{item.PROCESS_TIME}}</span> <span style="margin-left: 10px" :style="{color:Dict[item.CON_SIG_STATUS_VALUE+'']}">({{nameDict[item.CON_SIG_STATUS_VALUE+'']}})</span>
                        </div>
                    </template>
                    <template #body>
                        <div class="subTitle">{{item.ITEM_NAME}}</div>
                        <div class="time">起止日期：{{item.EFFECTIVE_DATE}} ~ {{item.INVALID_DATE}}</div>
                    </template>
               </Facard>
               <div class="loading_box"  v-show="loading1" >
                <van-loading type="spinner" style="text-align:center;margin-top:10px;" size="20px">加载中...</van-loading>
               </div>
              <Empty v-if="pageData1.empty"></Empty>
          </template>
          <template #tab2>
               <Card :href="`detail.html?taskId=${item.TASK_ID}&type=C`" class="listCard"
                 v-for="item in pageData2.data"
                    :key="item.TASK_ID">
                    <template #title  :scope="index">
                        <div class="name">{{item.STAFF_NAME}}</div>
                        <div class="status">
                        <span>{{item.PROCESS_TIME}}</span><span class="statusText" style="margin-left: 10px" :style="{color:Dict[item.CON_SIG_STATUS_VALUE+'']}">({{nameDict[item.CON_SIG_STATUS_VALUE+'']}})</span>
                        </div>
                    </template>
                    <template #body>
                        <div class="subTitle">{{item.ITEM_NAME}}</div>
                        <div class="time">起止日期：{{item.EFFECTIVE_DATE}} ~ {{item.INVALID_DATE}}</div>
                    </template>
                    </Card>
                    <div class="loading_box" v-show="loading2" >
                        <van-loading type="spinner" style="text-align:center;margin-top:10px;" size="20px">加载中...</van-loading>
                    </div>
                    <Empty v-if="pageData2.empty"></Empty>
          </template>
     </ScrollTab>
    </div>
  </div>
</template>

<script>
import vm from "vue";
import { Tab, Tabs } from "vant";
import Card from "@/components/card";
import Facard from "@/components/facard";
import { Loading } from 'vant';
import "./less/style.less"
import ScrollTab from "@/components/scrollTab"
const Dict ={
      "BEG":["已创建","#3ab5ff"],
      "COM":["待签章","#f3a640"],
      "EMP":["待签章","#f3a640"],
      "END":["已结束","#c9c9c9"],
      "DIS":["已废弃","#c9c9c9"],
      "0":"#3ab5ff", /*创建*/
      "1":"#66c142", /*已签章*/
      "2":"#f3a640", /**未签章 */
      "3":"#c9c9c9", /**已废弃 */
      "4":"#c9c9c9", /** 已结束 */
      "5":"#c9c9c9", /** 已拒签 */
};
const nameDict = {
  "1":"已签章",
  "2":"待签章",
  "3":"已废弃",
  "4":"已结束",
  "5":"已拒签"
}

let obData = vm.observable({
  title: "",
  gobackPath: "",
});
export default {
  name: "App",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    Card,
    Facard,
    [Loading.name]:Loading,
    ScrollTab
  },
  provide() {
    return {
      obData: obData,
    };
  },
  data() {
    return {
      userFlag:null,
      pageNum:0,
      Dict:Object.freeze(Dict),
      nameDict:Object.freeze(nameDict),
      active: 0,
      loading1:false,
      loading2:false,
      pageData1:{
          page:{
              pageSize:10,
              pageNo:1,
          },
          loadflag:true,
          data:[],
          pending:null,
          empty:false,
      },
      pageData2:{
            page:{
              pageSize:10,
              pageNo:1,
            },
            loadflag:true,
            data:[],
            pending:null,
            empty:false,
          
      },
    };
  },
  async created(){
      
    await this.checkType();
    this.initData();
  },
  mounted() {
    try {
        document.addEventListener("showPage", async ()=>{
            await this.checkType();
            this.initData();
          });
    } catch (error) {
      
    }
       
         document
        .getElementById("preloading")?.parentNode.removeChild(document.getElementById("preloading"));
    
  },
  methods: {
      /**检测是否是授权人登入 */
    checkType(){
        return $api.getUserFalg({
          loginUserCode: storeData.staff_no,
          tenant_id: storeData.tenant_id
        }).then((res)=>{
            this.userFlag=res.data;
            if(res.data==true){
                this.pageNum=2;
            }else{
                this.pageNum=1;
            }
        });
    },
    getself_data(pageIdx,a){
             this["loading"+pageIdx]=true;
             $api.getSelfContract({
                     loginUserCode: storeData.staff_no,
                     tenant_id: storeData.tenant_id,
                     pageNo: this.pageData1.page.pageNo,
                    pageSize:this.pageData1.page.pageSize,
                }).then(res=>{
                    if(res.data.data.length<this.pageData1.page.pageSize){
                        this.pageData1.loadflag=false;
                    }
                    this["loading"+pageIdx]=false;
                    this.pageData1.pending=res.data.pending;
                    if(a){
                       this.pageData1.data = [].concat(res.data.data);
                       if(this.pageData1.data.length==0){
                          this.pageData1.empty=true;
                       }
                    }else{
                       this.pageData1.data = this.pageData1.data.concat(res.data.data);
                      
                    }
                  
                    this.pageData1.page.pageNo+=1;
                    this.$refs.scroll.finishPullUp(pageIdx);
             }).catch(()=>{
                 this.pageData1.page=[];
                 this.pageData1.empty=true;
                 this["loading"+pageIdx]=false;
             });
    },
    getAuthor_data(pageIdx,a){
              this["loading"+pageIdx]=true;
              $api.getAuthorContract({
                    pageNo: this.pageData2.page.pageNo,
                    pageSize:this.pageData2.page.pageSize,
                    loginUserCode: storeData.staff_no,
                    tenant_id: storeData.tenant_id
                }).then(res=>{
                    if(res.data.data.length<this.pageData2.page.pageSize){
                        this.pageData2.loadflag=false;
                    }
                     this["loading"+pageIdx]=false;
                     this.pageData2.pending=res.data.pending;
                      if(a){
                       this.pageData2.data = [].concat(res.data.data);
                       if(this.pageData2.data.length==0){
                          this.pageData2.empty=true;
                       }
                      }else{
                        this.pageData2.data = this.pageData2.data.concat(res.data.data);
                        
                      }
                     this.pageData2.page.pageNo+=1;
                      this.$refs.scroll.finishPullUp(pageIdx);
                   
                }).catch(()=>{
                this.pageData2.page=[];
                this.pageData2.empty=true;
                this["loading"+pageIdx]=false;
              });;
    },
    initData(){
            this.pageData1.loadflag=true;
            this.pageData2.loadflag=true;
            this.pageData1.page.pageNo=1;
            this.pageData2.page.pageNo=1;
            this.getself_data(1,true);
            this.getAuthor_data(2,true);
    },
    loadMore(pageIdx){
        if(this["loading"+pageIdx]==true) return;
        if(pageIdx==1&&this.pageData2.loadflag){
            this.getself_data(pageIdx);
        }
        if(pageIdx==2&&this.pageData2.loadflag){
            this.getAuthor_data(pageIdx);
        }
    
    },
    beforeChange(index){
        return true
    }
    ,changeTab(){
        // console.log(this.active)
    }
    
   
    
  },
  computed: {
    title() {
      return obData.title;
    },
  },
};
</script>
<style lang="less">
#app {
  padding: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #222;
  font-size: 30px;
  padding-top: 90px;
  padding-bottom: 30px;
  .van-tabs__line {
    width: 150px;
  }
  .van-tabs__wrap {
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0;
    z-index: 2;
    // box-shadow: 0px 0px 10px #eee;
    // border-bottom: solid 1px #eee;
  }
  .listCard {
    width: 93%;
    // margin-top: 20px;
    // margin-bottom:20px;
    box-sizing:border-box;
    padding:10px;
    &:first-child{
      padding-top:20px;
    }
    .subTitle {
      font-size: 30px;
      // font-weight: bold;
      margin: 15px;
    }
    .time {
      font-size: 26px;
      color: #999;
      padding: 15px;
    }
    .desc{
         font-size:26px;
         color: #999;
         padding: 15px;
         display: flex;
         line-height:20PX;
         .content{
             display: flex;
             white-space:pre-wrap;
             
         }
    }
    // .status{
    //   .statusText{
    //     display:inline-block;
    //     width:100px;
    //     text-align:right;
    //   }
    // }
   
  }
}
.slide-fade-enter-active {
  transition: all 0.6s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(20px);
  opacity: 0;
}
</style>
